import { SiGitee } from "react-icons/si";
import SettingsDialog from './SettingsDialog';
import {SettingContext} from '../contexts/SettingContext'
import {useContext, useState} from 'react';
import OutputSettingsSection from './OutputSettingsSection';
import {GeneratedCodeConfig} from '../types'

export default () => {
  const { settings, setSettings } = useContext(SettingContext);
  const [openDialog, setOpenDialog] = useState<boolean>(false);

  return (
    <header className="flex items-center p-4 justify-between relative">
      <div className="flex items-center">
        <img className="w-[40px] h-[40px] left-5" src="/logo.png" />
        <span className="ml-2">Front-end Code Generation Platform</span>
      </div>
      <div className="flex items-center">
        <div className="flex-1">
          <ul className="hidden md:flex float-right text-lg text-slate-700 items-center">
            <li className="mx-2">
                <OutputSettingsSection
                  generatedCodeConfig={settings.generatedCodeConfig}
                  setGeneratedCodeConfig={(config: GeneratedCodeConfig) =>
                    setSettings({
                      ...settings,
                      generatedCodeConfig: config,
                    })
                  }
                />
            </li>
            <li className="mx-2">
              <span>
                <SettingsDialog 
                  settings={settings} 
                  setSettings={setSettings}
                  openDialog={openDialog}
                  setOpenDialog={setOpenDialog}
                />
              </span>
            </li>
            <li className="mx-2">
                <a
                  href="https://gitee.com/openInula/inula-code-generator"
                  target="_blank"
                  className="hover:text-[#2752f4]"
                >
                  <SiGitee className="text-xl" />
                </a>
            </li>
          </ul>
        </div>
      </div>
    </header>
  );
};
